<script setup>
import LfDropdownPanel from '@/components/commonUI/LfDropdownPanel.vue'
import arrowIcon from '/imgs/commonIcons/arrow.svg'
import { useTopicClassListQuery } from '@/composables/useTopicDataQuery'

const props = defineProps({
  onSelectClassify: Function,
})

const topicClassifyDropdownRef = ref(null)

const selectedTopicName = ref(undefined)

const handleTopicClick = (id, name) => {
  selectedTopicName.value = name
  topicClassifyDropdownRef.value.hidePanel()
  props.onSelectClassify(id)
}

const { data } = useTopicClassListQuery()
</script>

<template>
  <div class="relative h-fit">
    <LfDropdownPanel ref="topicClassifyDropdownRef">
      <div class="cursor-pointer bg-slate-200 flex-cc w-fit p-3 py-1 rounded-full gap-2 hover:bg-slate-300">
        <div :class="{ 'font-semibold': selectedTopicName, 'text-[#73777c]': !selectedTopicName }">
          {{ selectedTopicName ?? '请选择分类 *' }}
        </div>
        <img :src="arrowIcon" alt="" />
      </div>

      <template #content>
        <div class="flex flex-col gap-2 shadow-lg p-2 rounded-lg w-[200px] max-h-[300px] overflow-y-auto">
          <div
            class="cursor-pointer hover:bg-slate-100 p-2 py-1 flex items-center gap-2"
            v-for="item in data.result"
            :key="item.id"
            @click="handleTopicClick(item.id, item.topicName)">
            {{ item.topicName }}
          </div>
        </div>
      </template>
    </LfDropdownPanel>
  </div>
</template>

<style scoped lang="scss"></style>
